<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="show=!show">点我</button>
    <h2 v-if="show">
        Hello Vuejs
    </h2>
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: #ff7ce9">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
        <li v-else :key="index" style="background-color:blue">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>

    <hr>
    <h2 v-show="show">
        你好马?
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show:true,
            users: [
                {"name": "张三", "age": 13,"gender":"男"},
                {"name": "李四", "age": 50,"gender":"女"},
                {"name": "王五", "age": 16,"gender":"男"}
            ],
            person:{"name":"赵六","age":4,"gender":"女","address":"中国"}
        }
    });
</script>
</body>
</html>